<template lang="pug">
  Modal.ss-add-modal-lzw(v-model="createShow" fullscreen title="新建订单")
    .created-info
      Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="130")
        FormItem(label="派单企业：" prop="customerId")
          Select.input-has-border(v-model="formValidate.customerId" filterable @on-change="customerChange")
            Option(v-for="(item, index) in companyList" :value="item.id" :key="index") {{ item.name }}
        FormItem(v-if="storeShow" label="门店：" prop="storeId")
          Select.input-has-border(v-model="formValidate.storeId" filterable @on-change="customerChange")
            Option(v-for="(item, index) in storeArr" :value="item.id" :key="index") {{ item.name }}
        FormItem(label="订单名称：" prop="orderName")
          Input.input-has-border(v-model="formValidate.orderName" type="text" placeholder="请输入订单名称")
        FormItem(label="结算方式：" prop="type")
          Select.input-has-border(v-model="formValidate.type" style="width:200px" @on-change="wayChange")
            Option(v-for="(item, index) in vordertypeArr" :value="item.key" :key="index") {{ item.value }}
        FormItem.commission(label="服务佣金：" prop="commission")
          Input.input-has-border(v-model="formValidate.commission" type="number" style="width:100px" @on-blur="commissionChange")
          span.ml-10.company 元/
          Select.lzw-style.input-has-border(v-model="formValidate.company" style="width: 100px" disabled)
            Option(v-for="(item,index) in ordercompanyArr" :key="index" :value="item.key") {{item.value}}
        FormItem( label="服务费率：" prop="commissionRate")
          Input.input-has-border(v-model="formValidate.commissionRate " type="number" style="width:100px" @on-blur="rateChange")
          span.ml-10.company %
        FormItem( label="到手佣金：")
          Input.input-has-border(v-model="formValidate.getInCommission " type="number" style="width:100px" readonly)
          //- span {{formValidate.getInCommission}}
          span.ml-10.company 元
        FormItem(v-if="formValidate.type === '1'" label="服务开始时间：" prop="serverStartTime")
          .d-f-c
            DatePicker.input-has-border(v-model="formValidate.serverStartTime" type="datetime" placeholder="请选择日期")
        FormItem(v-if="formValidate.type === '1'" label="服务结束时间：" prop='serverEndTime')
          .d-f-c
            DatePicker.input-has-border(v-model="formValidate.serverEndTime" type="datetime" placeholder="请选择日期")
        FormItem(label="工作地点：" prop="orderAddress")
          Cascader.input-has-border(v-model="areaIdArr" placeholder="请选择工作地点" :filterable="true" :data="areaArr" :change-on-select="true" :load-data="loadDataCity" style="display: inline-block;width:300px;" @on-change="areaChange")
          Button.ml-5(:class="active?'active':''" @click="buxianBtn") 不限
        FormItem(label="订单内容：" prop="orderContent")
          editor(ref="editor" v-model="formValidate.orderContent")
    .text-center(slot="footer")
      Button(@click="createShow=false") 取消
      Button(type="info" @click="confirmFn('formValidate')") 提交订单
</template>

<script>
import Editor from '_c/editor'
import dataApi from '@/api/data.js'
import vOrderApi from '@/api/v_order.api.js'

export default {
  props: {
    companyList: Array,
    vordertypeArr: Array,
    ordercompanyArr: Array
  },
  components: {
    Editor
  },
  data () {
    return {
      active: false,
      areaArr: [], // 工作地点数组
      areaIdArr: [], // 地点id数组
      areaId: '',
      storeShow: false, // 门店
      storeArr: [], // 门店数组
      createShow: false,
      formValidate: {
        customerId: '',
        storeId: '',
        orderName: '',
        orderContent: '',
        type: '2',
        company: '2',
        commission: '',
        commissionRate: 0,
        getInCommission: '',
        serverStartTime: '',
        serverEndTime: '',
        areaId: '',
        orderAddress: '',
        orderStatus: '1',
        userId: JSON.parse(localStorage.getItem('clientLoginInfo')).data.userId
      },
      ruleValidate: {
        customerId: [
          { required: true, message: '请选择派单企业', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择结算方式', trigger: 'change' }
        ],
        orderName: [
          { required: true, message: '请输入订单名称', trigger: 'blur' }
        ],
        commission: [
          { required: true, message: '请输入佣金', trigger: 'blur' }
        ],
        commissionRate: [
          { required: true, message: '请输入服务费率', trigger: 'blur' }
        ],
        getInCommission: [
          { required: true, message: '佣金不能为空', trigger: 'blur' }
        ],
        orderContent: [
          { required: true, message: '订单内容不能为空', trigger: 'blur' }
        ],
        orderAddress: [
          { required: true, message: '请选择工作地点', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.getProvince()
  },
  methods: {
    // editorChange (html, text) {
    //   // console.log(html, text)
    //   // this.formValidate.orderContent = html
    // },
    modalOpen () {
      this.createShow = true
    },
    wayChange (val) {
      console.log(val)
      this.formValidate.type = val
      if (val === '1') {
        this.formValidate.company = '1'
        this.ruleValidate.serverStartTime = [
          { required: true, type: 'date', message: '服务开始时间不能为空', trigger: 'change' }
        ]
        this.ruleValidate.serverEndTime = [
          { required: true, type: 'date', message: '服务结束时间不能为空', trigger: 'change' }
        ]
      } else {
        this.formValidate.company = '2'
        this.ruleValidate.serverStartTime = ''
        this.ruleValidate.serverEndTime = ''
      }
    },
    customerChange (val) {
      console.log(val)
      if (val) {
        vOrderApi.getStore({
          companyid: val
        }).then(res => {
          if (res.data.success) {
            this.storeShow = true
            this.storeArr = res.data.data
            this.formValidate.storeId = ''
            this.ruleValidate.storeId = [
              { required: true, message: '门店不能为空', trigger: 'change' }
            ]
          } else {
            this.storeShow = false
            this.formValidate.storeId = val
          }
        })
      }
    },
    commissionChange () {
      this.formValidate.getInCommission = (parseInt(this.formValidate.commission) * (1 - parseInt(this.formValidate.commissionRate)/100)).toFixed(2)
    },
    rateChange () {
      this.formValidate.getInCommission = (parseInt(this.formValidate.commission) * (1 - parseInt(this.formValidate.commissionRate)/100)).toFixed(2)
    },
    buxianBtn () {
      this.active = !this.active
      this.areaIdArr = []
      this.formValidate.orderAddress = '不限'
    },
    confirmFn (name) {
      this.formValidate.orderContent = this.$refs.editor.editor.txt.html()
      this.$refs[name].validate((valid) => {
        if (valid) {
          console.log(this.formValidate)
          // this.formValidate.commissionRate = (parseInt(this.formValidate.commissionRate)/100).toString()
          vOrderApi.createDispatch(this.formValidate).then(res => {
            if (res.data.success) {
              this.$Message.success(res.data.message)
              this.createShow = false
              this.$refs[name].resetFields()
              this.areaIdArr = []
              this.formValidate = {
                customerId: '',
                storeId: '',
                orderName: '',
                orderContent: '',
                type: '2',
                company: '2',
                commission: '',
                commissionRate: 0,
                getInCommission: '',
                serverStartTime: '',
                serverEndTime: '',
                areaId: '',
                orderAddress: '',
                orderStatus: '1',
                userId: JSON.parse(localStorage.getItem('clientLoginInfo')).data.userId
              }
              this.$emit('get-list')
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
          this.$Message.warning('有必填项未填')
        }
      })
    },
    areaChange (value, selectedData) {
      console.log(value, selectedData)
      this.active = false
      this.formValidate.areaId = value[value.length - 1]
      let arr = selectedData.map(item => {
        return item.name
      })
      this.formValidate.orderAddress = arr.join('/')
    },
    getProvince () {
      dataApi.getProvince().then(res => {
        this.areaArr = res.data.data.map(item => {
          return {
            ...item,
            label: item.name,
            value: item.id,
            children: [],
            loading: false
          }
        })
      })
    },
    loadDataCity (val, callback) {
      val.loading = true
      if (val.levelID === 2) {
        dataApi.getCity({ parentId: val.value }).then(res => {
          val.children = res.data.data.map(item => {
            return {
              ...item,
              label: item.name,
              value: item.id,
              children: [],
              loading: false
            }
          })
          val.loading = false
          callback()
        })
      } else {
        dataApi.getArea({ parentId: val.value }).then(res => {
          val.children = res.data.data.map(item => {
            return { ...item, label: item.name, value: item.id }
          })
          val.loading = false
          callback()
        })
      }
    }
  }
}
</script>
<style lang="less">
  .lzw-style{
    &.ivu-select-disabled .ivu-select-selection{
      color: #333;
      background-color: #fff;
      padding: 0;
      border: none;
      cursor: auto;
      .ivu-select-arrow{
        display: none;
      }
    }
  }
  .ss-add-modal-lzw{
    .ivu-modal-wrap{
      top: 10%;
      bottom: 10%;
      right: 10%;
      left: 10%;
    }
  }
</style>
<style lang="less" scoped>
  span.style-1{
    vertical-align: middle;
  }
  .d-f-c{
    display: flex;
    align-items: center;
  }
  .active{
    background-color: @main_color;
    color: #fff;
  }
  .commission{
    .company{
      display: inline-block;
      height: 36px;
      line-height: 36px;
    }
  }
</style>
